<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="stripes" uri="http://stripes.sourceforge.net/stripes.tld" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ page trimDirectiveWhitespaces="true" %>

<fmt:setBundle basename="StripesResources" />

<stripes:layout-definition>
    <html>
        <head>
            <title>${pageTitle}</title>
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
            <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
            <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
            <script src="${pageContext.request.contextPath}/template/js-lang.jsp"></script>
            <script src="${pageContext.request.contextPath}/js/rk.js"></script>
            <link rel="stylesheet" href="${pageContext.request.contextPath}/css/custom.css">
            <stripes:layout-component name="html_head"/>
        </head>
        <body>
            <stripes:layout-component name="nav">
                <div>
                    <nav class="navbar navbar-default" role="navigation">
                        <div class="container-fluid">
                            <!-- Brand and toggle get grouped for better mobile display -->
                            <div class="navbar-header">
                                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                                    <span class="sr-only">Toggle navigation</span>
                                    <span class="icon-bar"></span>
                                    <span class="icon-bar"></span>
                                    <span class="icon-bar"></span>
                                </button>
                                <a class="navbar-brand" href="#"><fmt:message key="common.home" /></a>
                            </div>

                            <!-- Collect the nav links, forms, and other content for toggling -->
                            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                                <ul class="nav navbar-nav">
                                    <li class="dropdown">
                                        <a href="#" class="dropdown-toggle" data-toggle="dropdown"><fmt:message key="menu.main.template" /> <b class="caret"></b></a>
                                        <ul class="dropdown-menu">
                                            <li class="divider"></li>
                                            <li>
                                                <stripes:link beanclass="se.recept.kollen.module.bean.ProductActionBean"><fmt:message key="menu.main.products" /></stripes:link>
                                                </li>
                                                <li class="divider"></li>
                                                <li>
                                                <stripes:link beanclass="se.recept.kollen.module.bean.IngredientActionBean"><fmt:message key="menu.main.ingredients" /></stripes:link>
                                                </li>
                                                <li class="divider"></li>
                                                <li><stripes:link href="/index.jsp"><fmt:message key="menu.main.create.product" /></stripes:link></li>
                                                <li class="divider"></li>
                                                <li><stripes:link href="/index.jsp"><fmt:message key="menu.main.packages" /></stripes:link></li>
                                                <li class="divider"></li>
                                                <li><stripes:link href="/index.jsp"><fmt:message key="menu.main.local.suppliers" /></stripes:link></li>
                                            </ul>
                                        </li>

                                        <li class="dropdown">
                                            <a href="#" class="dropdown-toggle" data-toggle="dropdown"><fmt:message key="menu.main.recipe" /> <b class="caret"></b></a>
                                        <ul class="dropdown-menu">
                                            <li class="divider"></li>
                                            <li><stripes:link href="/index.jsp"><fmt:message key="menu.main.overview" /></stripes:link></li>
                                            </ul>
                                        </li>
                                    </ul>
                                    <ul class="nav navbar-nav navbar-right">
                                        <li class="dropdown">
                                            <a href="#" class="dropdown-toggle" data-toggle="dropdown"><fmt:message key="menu.main.other" /> <b class="caret"></b></a>
                                        <ul class="dropdown-menu">
                                            <li class="divider"></li>
                                            <li><stripes:link href="/index.jsp"><fmt:message key="menu.main.help" /></stripes:link></li>
                                            </ul>
                                        </li>
                                        <li><stripes:link href="/index.jsp"><fmt:message key="common.logout" /></stripes:link></li>
                                    </ul>
                                </div><!-- /.navbar-collapse -->
                            </div><!-- /.container-fluid -->
                        </nav>
                    </div>
            </stripes:layout-component>

            <div class="container-spacer" />

            <div class="container-fluid">
                <stripes:layout-component name="container">
                    <div class="row">
                        <div class="col-sm-4 col-md-7 col-lg-3">
                            <stripes:layout-component name="leftbar"/>
                        </div>
                        <div class="col-sm-8 col-md-5 col-lg-9">
                            <stripes:layout-component name="contents"/>
                        </div>
                    </div>
                </stripes:layout-component>
            </div>

            <div id="footer">
                <p class="text-center">© Copyright 2014 - Recept kollen.</p>
            </div>


            <div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
                <div class="modal-dialog modal-sm">
                    <div class="modal-content">
                        ...
                    </div>
                </div>
            </div>             
        </body>
    </html>
</stripes:layout-definition>
